import React from 'react';
import moment from 'moment';

import iconWind from '@/assets/datang/icon/wind.png';
import iconPv from '@/assets/datang/icon/pv.png';
import iconWater from '@/assets/datang/icon/water.png';
import iconPrice from '@/assets/datang/icon/price.png';
import markerWind from '@/assets/datang/marker/wind.png';
import markerPv from '@/assets/datang/marker/pv.png';
import markerWater from '@/assets/datang/marker/water.png';
import mapBg from '@/assets/datang/map_bg.png';
import logo from '@/assets/datang/logo.svg';
import { fetchRealtimeElectricPriceTrend } from '@/pages/GanSuDaTang/Dashboard/services';

import { default as TotalHead } from './total';
import { default as TooltipCard } from './tooltip';
import styles from './index.less';

const markerIcons = {
  wind: markerWind,
  pv: markerPv,
  water: markerWater,
  logo,
};

const PriceItem = ({ label, value, color }) => (
  <div className={styles.price_item}>
    <div className={styles.price_pic}>
      <img src={iconPrice} />
      <div style={{ background: color }}>{label}</div>
    </div>
    <div className={styles.price_vals}>
      <div className={styles.lab}>{label}实时电价</div>
      <div className={styles.val}>
        {value}
        <span className={styles.unit}>元/MWh</span>
      </div>
    </div>
  </div>
);
const TotalItem = ({ value, label, icon }) => (
  <div>
    {icon && <img src={icon} className={styles.icon} />}
    <span className={styles.lab}>{label}</span>
    <span className={styles.val}>{value}</span>
  </div>
);

export default ({ dataSource }) => {
  const [active, setActive] = React.useState(null);
  const [RTP, setRTP] = React.useState(null);

  React.useEffect(() => {
    setActive(dataSource?.layout?.stations?.[0] || null);
  }, [JSON.stringify(dataSource)]);

  React.useEffect(() => {
    fetch();
    const timer = setInterval(() => {
      fetch();
    }, 15 * 60 * 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  const fetch = async () => {
    const today = moment().format('YYYY-MM-DD');
    const res = await fetchRealtimeElectricPriceTrend(today);
    setRTP(res?.data);
  };

  return (
    <div className={styles.container}>
      <TotalHead data={dataSource?.dataPlanCompleteRate?.planCompleteRateMap} />
      {!!active && <TooltipCard data={active} onClose={() => setActive(null)} />}
      <div className={styles.price_card}>
        <PriceItem value={RTP?.heDong || 0} label="河东" color="#18A0FB" />
        <PriceItem value={RTP?.heXi || 0} label="河西" color="#46DADB" />
      </div>
      <div className={styles.total_b}>
        <TotalItem value={dataSource?.layout?.count?.all || 0} label="全部" />
        <TotalItem value={dataSource?.layout?.count?.wind || 0} label="风电" icon={iconWind} />
        <TotalItem value={dataSource?.layout?.count?.pv || 0} label="光伏" icon={iconPv} />
        <TotalItem value={dataSource?.layout?.count?.water || 0} label="水电" icon={iconWater} />
      </div>
      <div className={styles.amap}>
        <div className={styles.update_time}>
          数据时间：{dataSource?.dataPlanCompleteRate?.lastUpdateDate}
        </div>
        <img className={styles.bg} src={mapBg} alt={''} />
        {(dataSource?.layout?.stations || []).map((item, idx) => (
          <div
            key={`sta_${idx}`}
            className={[
              styles.marker,
              item.name === active?.name ? styles.act : '',
              styles[item.type],
            ].join(' ')}
            style={{ left: item.pos[0], top: item.pos[1] }}
            onClick={() => setActive(item)}
          >
            <i />
            <img src={markerIcons[item.type]} alt={''} />
            {item.name === active?.name && (
              <div className={styles.animate_wave}>
                <div className={styles.w1} />
                <div className={styles.w2} />
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};
